<template>
	<view class="select-page">
		<u-collapse >
			<template v-for="(team, teamIndex) in teamLists">
				<u-collapse-item :key="teamIndex" :title="`${team.teamName}(${team.carNum})`" name="Docs guide">
					<view v-for="(item,index) in team.children" class="item-car" :key="index"  @click="handleThis(item)">
						<image :src="item.positionImg" mode="aspectFit" class="item-car-img"></image>
						<text>
							{{item.vehicleNum}} [ACC {{item.acc==1?'开':'关'}}]
							<template v-if="item.cameraNum>0">
								(视)
							</template>					
						</text>
					</view>
				</u-collapse-item>
			</template>
		</u-collapse>
	</view>
</template>

<script>
	import hwVehicleLocationApi from '@/api/hwVehicle/hwVehicleLocationApi'
	import hwVehicleTeamApi from '@/api/hwVehicle/hwVehicleTeamApi'
	export default {
		props: {
			top: String
		},
		data() {
			return {
				teamLists: [],
				noSelect: true
			}
		},
		computed: {
			
		},
		mounted() {
			this.getVehicleList()
		},
		methods: {
			getVehicleList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})

				hwVehicleLocationApi.hwVehicleRealTime({

				}).then((res) => {
					if (res.code == 200) {
						var list = res.data.vehicleList
						this.teamLists.splice(0, this.teamLists.length)
						for (var i in list) {
							var item = list[i]
							if (!(item.teamId && item.teamId.length > 0)) {
								item.teamId = "other"
								item.teamName = "其他"
							}
							var index = this.teamLists.findIndex(t => {
								if (item.teamId == t.teamId) {
									t.carNum++
									t.children.push(item)
									return true
								} else {
									return false
								}
							})
							if (index < 0) {
								var obj = {
									teamId: item.teamId,
									teamName: item.teamName,
									carNum: 1,
									children: [],
								}
								obj.children.push(item)
								this.teamLists.push(obj)
							}
						}
					}
				})
			},
			handleThis(item) {
				if (this.noSelect){
					this.noSelect = false
					let carHistory = uni.getStorageSync('carHistory')
					if (carHistory) {
						const result = carHistory.some(car => car.id === item.id)
						if (!result) {
							carHistory.push(item)
							uni.setStorageSync('carHistory', carHistory)
						}
					} else {
						uni.setStorageSync('carHistory', [item])
					}
					this.$store.commit('SET_CAR_INFO', item)
					uni.navigateBack({
					
					})	
				}
						
			},

		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style scoped>

	.select-page {
		/* margin-top: 20rpx; */
	}

	.tree-tit {
		width: 702rpx;
		height: 98rpx;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		background: #F9F9FA;
		font-size: 28rpx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.tree-right,
	.right-item {
		display: flex;
		align-items: center;
	}

	.right-item image {
		width: 30rpx;
		height: 30rpx;
		margin-right: 18rpx;
	}

	.item {
		padding: 0 36rpx;
		background: #FFFFFF;
		border: 1px solid #E5E5E6;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-bottom: 12rpx;
	}

	.item-team,
	.item-car {
		height: 90rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		margin-bottom: 10rpx;
		border: 1px solid #177fff;
		border-radius: 8rpx;
		padding-left: 15rpx;
	}

	.item-team-img {
		width: 42rpx;
		height: 34rpx;
		margin-right: 36rpx;
	}

	.item-car-img {
		width: 42rpx;
		height: 34rpx;
		margin-right: 36rpx;
	}
</style>